<template>
	<view class="box">
		<image :style="{'border-radius':'5px',width:width+'rpx',height:height+'rpx'}" mode="center" :src="src"
			@tap="previewImage" @error="errorHandle" @load="loadHandle">
		</image>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: './images/none.png'
			},
		},
		data() {
			return {
				maxWidth: 340,
				maxHeight: 340,
				width: 0,
				height: 0
			}
		},
		methods: {
			errorHandle() {
				this.src = './images/picFail.png';
			},
			loadHandle(e) {
				let wRadio = this.maxWidth / e.detail.width
				let hRadio = this.maxHeight / e.detail.height
				let radio = wRadio < hRadio ? wRadio : hRadio
				this.width = Math.floor(e.detail.width * radio)
				this.height = Math.floor(e.detail.height * radio)
			},
			//预览图片
			previewImage() {
				uni.previewImage({ // 预览图片  图片路径必须是一个数组
					current: this.src,
					urls: [this.src]
				});
			}
		}
	}
</script>

<style lang="scss">
	.box {
		position: relative;
	}
</style>
